<template>
  <div class="goodslist">
    <!-- <router-link class="goodsitem" v-for="item in goodslist" :key="item.id" :to="'/home/goodsinfo/' + item.id" tag="div">
      <img :src="item.url" alt="">
      <h1 class="title">{{ item.title }}</h1>
      <div class="info">
        <p class="price">
          <span class="now">{{ item.now }}</span>
          <span class="old">{{ item.old }}</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩60件</span>
        </p>
      </div>
    </router-link> -->
    <div class="goodsitem" v-for="item in goodslist" :key="item.id" @click="getDial(item.id,item.message)">
      <img :src="item.url" alt="">
      <h1 class="title">{{ item.title }}</h1>
      <div class="info">
        <p class="price">
          <span class="now">{{ item.now }}</span>
          <span class="old">{{ item.old }}</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩70件</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      goodslist : [
        {id:0,title : '小米（Mi）小米Note 16G双网通版',
        url : 'http://ofv795nmp.bkt.clouddn.com//upload/201504/20/thumb_201504200119256512.jpg',
         message : {
          title : '小米（Mi）小米Note 16G双网通版',
          old : '2399',
          new : '2199',
          img :[
            {img_url:'https://g-search3.alicdn.com/img/bao/uploaded/i4/TB10flplA7mBKNjSZFyXXbydFXa.jpg_180x180.jpg_.webp'},
            {img_url:'https://g-search2.alicdn.com/img/bao/uploaded/i4/TB1OVumi8jTBKNjSZFwXXcG4XXa.jpg_180x180.jpg_.webp'},
            {img_url:'https://g-search2.alicdn.com/img/bao/uploaded/i4/TB10flplA7mBKNjSZFyXXbydFXa.jpg_180x180.jpg_.webp'}
          ]
        },
        now : '￥2999',
        old: '￥3299',
        },
        {id:1,title : '小米电脑（Mi）小米 1T',
        url : 'https://g-search3.alicdn.com/img/bao/uploaded/i4/TB1Fip7gFuWBuNjSspnEB41NVXa_034604.jpg_180x180.jpg_.webp',
         message : {
          title : '小米电脑（Mi）小米 1T',
          old : '2399',
          new : '2199',
          img: [
            {img_url:'https://g-search3.alicdn.com/img/bao/uploaded/i4/TB1Sw1wdBjTBKNjSZFwXXcG4XXa.jpg_180x180.jpg_.webp'},
            {img_url:'https://g-search3.alicdn.com/img/bao/uploaded/i4/TB1Fip7gFuWBuNjSspnEB41NVXa_034604.jpg_180x180.jpg_.webp'},
            {img_url:'https://g-search3.alicdn.com/img/bao/uploaded/i4/TB1nKTaekZmBKNjSZPiXXXFNVXa.jpg_180x180.jpg_.webp'}
          ]
        },
        now : '￥2999',
        old: '￥3299',
        },
        {id:2,title : ' 鼠标鼠标 ',
        url : 'https://g-search3.alicdn.com/img/bao/uploaded/i4/TB1veS2fOMnBKNjSZFzXXc_qVXa.jpg_180x180.jpg_.webp',
         message : {
          title : '鼠标',
         old : '99',
          new : '59',
          img:[
            {img_url:'https://g-search3.alicdn.com/img/bao/uploaded/i4/TB1veS2fOMnBKNjSZFzXXc_qVXa.jpg_180x180.jpg_.webp'},
            {img_url:'https://g-search3.alicdn.com/img/bao/uploaded/i4/TB18KRSfXkoBKNjSZFEXXbrEVXa.jpg_180x180.jpg_.webp'},
            {img_url:'https://g-search2.alicdn.com/img/bao/uploaded/i4/TB1qLeprpuWBuNjSspnvSF1NVXa_100951.jpg_180x180.jpg_.webp'}
          ]
        },
        now : '￥99',
        old: '￥59',
        },
      ],
    }
  },
  methods: {
    getDial(id,message){
      console.log(this);
      // this.$router.push('/home/goodsinfo/' + id);
      this.$router.push({name: 'GoodInfo',params:{ id : id,message: JSON.stringify(message)}})
      // 1. 最简单的
      // this.$router.push("/home/goodsinfo/" + id);
      // 2. 传递对象
      // this.$router.push({ path: "/home/goodsinfo/" + id });
      // 3. 传递命名的路由
      // this.$router.push({ name: "GoodInfo", params: { id } });
      // this.$router.push({path: '/home/goodsinfo/:id',query:{ id : id,message: JSON.stringify(message)}})

    }
  }
}
</script>
<style scoped>
  .goodslist{
   display: flex;
   flex-wrap: wrap;
   padding: 7px;
   justify-content: space-between;
  }
  .goodslist .goodsitem{
    width: 49%;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #ccc;
    margin: 4px 0;
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 293px;
  }
  .goodslist .goodsitem:hover{
    border: 1px solid red;
  }
  .goodslist .goodsitem img{
    width: 100%
  }
  .goodslist .goodsitem .title{
    font-size: 16px;
  }
  .goodslist .goodsitem .info .price .now{
    color: red;
    font-size: 14px;
    font-weight: bold;
  }
  .goodslist .goodsitem .info .price .old{
    font-size: 10px;
    text-decoration: line-through;
    margin-left: 30px;
  }
  .goodslist .goodsitem .sell{
    display: flex;
    justify-content: space-between;
  }
</style>


